<template>
    <div class="city-main">
        <div class="city-header">
          <div class="header">
            <div class="header-back" @click="cityBack"><span style="font-size:13px;" class="iconfont icon-changyongicon-1"></span>返回</div>
            <div class="header-search">
              <input type="text" v-model="saerchcity" placeholder="搜索城市">
            </div>
            <div class="header-city">{{localCity}}<span style="font-size:13px;" class="iconfont icon-xia1"></span></div>
          </div>
      </div>
      <div class="saerchkey" v-if="computedcitylist.length">
        <ul>
          <li v-for="item in computedcitylist" @click="handleClick(item.cityId, item.name)" :key="item.cityId">{{item.name}}</li>
        </ul>
    </div>
      <div>
          <mt-index-list ref="mylist">
              <mt-index-section :index="item.index" v-for="item in datalist" :key="item.index">
                <div v-for="cities in item.list" :key="cities.cityId" @click="handleClick(cities.cityId, cities.name)">
                    <mt-cell :title="cities.name"></mt-cell>
                </div>
            </mt-index-section>
        </mt-index-list>
      </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      datalist: [],
      citieslist: [],
      saerchcity: '',
      localCity: ''
    }
  },
  mounted () {
    this.localCity = localStorage.getItem('cityName') ? localStorage.getItem('cityName') : '未知城市'
    // 设置mt-index-list 的高度
    this.$refs.mylist.$el.style.height = document.documentElement.clientHeight - 50 + 'px'
    axios({
      url: 'https://m.maizuo.com/gateway?k=6870440',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16239969753025057135722497","bc":"540100"}',
        'X-Host': 'mall.film-ticket.city.list'
      }
    }).then(res => {
      this.citieslist = res.data.data.cities
      this.datalist = this.handleCity(res.data.data.cities)
      // console.log(res.data.data.cities)
    })
  },
  methods: {
    handleCity (datalist) {
      // console.log(datalist)
      // 生成26个英文字母A-Z数组
      var letterArr = []
      for (var i = 65; i < 91; i++) {
        letterArr.push(String.fromCharCode(i))
      }
      var newlist = []
      for (var j = 0; j < letterArr.length; j++) {
        var arr = datalist.filter(item => item.pinyin.substring(0, 1) === letterArr[j].toLowerCase())
        if (arr.length > 0) {
          newlist.push({
            index: letterArr[j],
            list: arr
          })
        }
      }
      return newlist
    },
    handleClick (cityId, cityName) {
      localStorage.setItem('cityId', cityId)
      localStorage.setItem('cityName', cityName)
      this.$router.push('/cinema')
      // console.log(localStorage.getItem('cityName'))
      // console.log(localStorage.getItem('cityId'))
    },
    cityBack () {
      this.$router.go(-1)
      // console.log('cityBack')
    }
  },
  computed: {
    computedcitylist () {
      if (this.saerchcity) {
        return this.citieslist.filter(item => item.name.indexOf(this.saerchcity) > -1)
      } else {
        return false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.city-main {
  position:relative;
  .city-header {
    width: 100%;
    background-color: #26a2ff;
    color:white;
    font-size:14px;
    .header {
    margin:0px 10px;
    height: 36px;
    .header-back {
      height: 36px;
      line-height: 36px;
      width:20%;
      float:left;
    }
    .header-search {
      position:relative;
      margin-top:6px;
      width:60%;
      height: 20px;
      line-height: 20px;
      float:left;
      text-align: center;
      background-color: #26a2ff;
      input:nth-child(1) {
        width:80%;
        background-color: #fff;
        text-align: center;
        color:#26a2ff;
        border-color: #fff;
        border-radius: 10px;
      }
    }
    .header-city {
      width:20%;
      height: 36px;
      line-height: 36px;
      float:right;
      text-align: right;
    }
    }
  }
  .saerchkey {
    position:relative;
    top:0px;
    left:0px;
    z-index: 1;
    height: 36px;
    line-height: 36px;
    color: #000;
    font-size:16px;
    ul {
      list-style: none;
      li {
        text-align: center;
        background: #ccc;
        opacity: 0.8;
        border-bottom:1px solid #f4f4f4;
      }
    }
  }
}

</style>
